<!-- 想定描述页面 -->
<template>
  <div class="digital-machine-detail-container">
    <div class="digital-machine-detail-inner">
      <div class="digital-machine-detail-header">
        {{ $t("tool.modelManage.basicInfo") }}
      </div>
      <div class="digital-machine-detail-content">
        <div class="dm-info">
          <div class="dm-info__statistics_content">
            <div class="dm-info__statistics_item">
              <div class="dm-info__statistics_item_num">11</div>
              <div class="dm-info__statistics_item_name">{{ $t('tool.modelManage.digitalMachineName') }}</div>
            </div>
            <div class="dm-info__statistics_item">
              <div class="dm-info__statistics_item_num">50</div>
              <div class="dm-info__statistics_item_name">{{ $t('tool.modelManage.digitalMachineEnglishName') }}</div>
            </div>
            <div class="dm-info__statistics_item">
              <div class="dm-info__statistics_item_num">9527110</div>
              <div class="dm-info__statistics_item_name">{{ $t('tool.modelManage.digitalMachineCode') }}</div>
            </div>
            <div class="dm-info__statistics_item" style="width: 100px;">
              <el-select v-model="form.status">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
              <div class="dm-info__statistics_item_name">{{ $t('tool.modelManage.digitalMachineStatus') }}</div>
            </div>
            <div class="dm-info__statistics_item" style=" width: 100%;">
              <div class="dm-info__statistics_item_word">描述</div>
              <div class="dm-info__statistics_item_name">{{ $t('tool.modelManage.digitalMachineDescribe') }}</div>
            </div>

          </div>

          <div class="flex" v-if="showButton">
            <el-button class="jtyj-btn-primary" @click="enter">{{
              $t("basic.enter")
            }}</el-button>
          </div>

        </div>
        <div class="dm-model">
          <div class="threeD-model-box"  @click="handleOpenModelBase">
            <div class="model-3d-show-content">
              <div class="upload-btn loc-center">
                <el-popover placement="top" :title="$t('tool.modelManage.selectModel')" trigger="hover">
                  <span slot="reference" role="img" class="appIcon">
                    <svg-icon class="jtyj-active-color" icon-class="add" width="25" height="25" />
                  </span>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ModelBase ref="modelBaseRef"></ModelBase>
  </div>
</template>

<script>
import ModelBase from "../model-base-dialog.vue";

export default {
  data() {
    return {
      form: {
        status: 0,
      },
      selectedNodeInfo: {}, // 当前选中节点的信息
      scenarioDataList: [], // 想定数据列表
      statusList: [
        {
          label: "开发中",
          value: 0,
        },
        {
          label: "已发布",
          value: 1,
        },
      ],
    }
  },
  components: {
    ModelBase,
  },
  props: {
    nodeInfo: {
      type: Object,
    },
    showButton: {
      type: Boolean,
      default: true
    }
  },

  mounted() {
    this.form = this.nodeInfo.data;
    this.form.status = 0
  },

  methods: {
    handleOpenModelBase() {
      this.$refs.modelBaseRef.init();
    },
    submitForm() { },
    downloadScenario() { },
    enter() {
      this.$router.push({ name: "digitalMachineBuild", query: { digitalMachineId: this.nodeInfo.id } })
    },
  }
}

</script>

<style lang="scss" scoped>
.digital-machine-detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;

  .digital-machine-detail-inner {
    background-color: var(--ui-component-background-alt);
    width: 80%;
    height: 350px;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 5px;

    .digital-machine-detail-header {
      width: 100%;
      display: flex;
      align-items: center;
      color: var(--ui-text-fg-low);
      font-size: var(--ui-font-size-base);
    }

    .digital-machine-detail-content {
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-size: var(--ui-font-size-base);

      .dm-info {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        .dm-info__statistics_content {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          flex-wrap: wrap;

          .dm-info__statistics_item {
            .dm-info__statistics_item_num {
              color: var(--ui-text-color);
              font-size: var(--ui-font-size-title);
            }

            .dm-info__statistics_item_word {
              font-size: var(--ui-font-size-base);
              color: var(--app-text-fg-low);
            }

            .dm-info__statistics_item_name {
              font-size: var(--ui-font-size-sm);
              color: var(--app-text-fg-low);
              margin-top: 10px;
              margin-bottom: 20px;

            }
          }

        }
      }

      .dm-model {
        width: 40%;
        height: 100%;

        .threeD-model-box {
          border: 1px solid var(--ui-border-color-base);
          height: 300px;

          .model-3d-show-content {
            width: 100%;
            height: 100%;

            .upload-btn {
              width: 100%;
              height: 100%;
              position: relative;
              box-sizing: border-box;
              overflow: hidden;
              cursor: pointer;

              i {
                color: var(--ui-text-color);
              }
            }
          }
        }
      }
    }
  }



}
</style>